<template>
  <div ref="myChart" class="myChart"></div>
</template>

<script>
export default {
  // 步骤
  mounted () {
    const dom = this.$refs['myChart']  // vue获取dom元素 采用ref的方式
    const echart = this.$echarts.init(dom)
    const option = {
      title: {
        text: '标题',
        left: 30
      },
        xAxis: {
          type: 'category',
          data: ['3月','4月','5月','6月', '7月', '8月', '9月', '10月', '11月'],
          axisLine: { // 轴线的设置
            show: false
          },
          axisTick: { // 刻度
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine:{
            show: false
          }
        },
        series: [
          {
            data: [100, 232,180,601,950,234,890, 630,800,700],
            type: 'line', // 线形图
            smooth: true, // 平滑曲线
            itemStyle: {
              opacity: 0
            },
            lineStyle:{
              color: '#5465CF',
              shadowBlur: 0,
              shadowColor: 'rgba(84,101,207,0.1)',
              shadowOffsetX: 10,
              shadowOffsetY: 5,
            }
          },
          {
            data: [0,1000,0,1000,0,1000,0,1000,0],
            type: 'bar',
            barWidth: '30px',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(84,101,207,0.1)' // 0% 处的颜色
                }, 
                {
                    offset: 0.5, color: 'rgba(84,101,207,0.06)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
    echart.setOption(option)
  }
}
</script>

<style scoped>
  div{
    width: 100%;
    min-height: 280px;
  }
  .myChart{
    transform: scale(1.2) translateY(30px) translateX(20px);

  }
</style>